<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp"%>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
<style>
    <%--百度地图取消显示logo--%>
    .BMap_cpyCtrl {display: none;}
    .anchorBL {display: none;}
    <%--信息样式--%>
    .kv-item label {width: 110px}
    .kv-item-content {line-height: 30px;border-bottom: 1px solid rgba(128,128,128,0.6);max-width: calc(90%)}
    .buttons .layui-btn{margin-bottom: 25px}
    .subfiled h2{cursor: pointer}
</style>

<div id="saper-container">
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>${titleName}</h2>
        </div>
        <div class="subfiled-content">
            <div class="saper-form">
                <div class="kv-item clearfix">
                    <label>任务编号：</label>
                    <div class="kv-item-content">${format.copnote.taskId}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报者：</label>
                    <div class="kv-item-content">${format.reportName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>乡镇：</label>
                    <div class="kv-item-content">${format.townName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>详细地址：</label>
                    <div class="kv-item-content">${format.copnote.address}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>主要对象：</label>
                    <div class="kv-item-content">${format.mainObjectName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>主要内容：</label>
                    <div class="kv-item-content">${format.mainContentName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>走访人员：</label>
                    <div class="kv-item-content">
                        <c:forEach var="people" items="${copnotePerson}">
                            ${people.name}&nbsp;&nbsp;&nbsp;
                        </c:forEach>
                    </div>
                </div>


                <div class="kv-item clearfix">
                    <label>事件地点：</label>
                    <div class="kv-item-content">${format.copnote.address}</div>
                </div>

                <div class="kv-item clearfix">
                    <label>gis信息：</label>
                    <div class="kv-item-content" style="border: none">
                        <div id="mapContainer" gis-lng="${format.copnote.lng}"
                             gis-lat="${format.copnote.lat}"
                             style="width: 600px;height: 400px;margin-top: 10px;"></div>
                        <div id="searchResultPanel"
                             style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报时间：</label>
                    <div class="kv-item-content">${format.createTimeName}</div>
                </div>

                <div class="kv-item clearfix">
                    <label>上报文件：</label>

                    <div class="kv-item-content" id="fileList">





                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="saper-ft"></div>
</div>

<%@ include file="../common/footer.jsp"%>

<script type="text/javascript">

   //创建地图
   // var map = new BMap.Map("mapContainer",{
   //     minZoom : 10
   // });



   // var point = new BMap.Point(lng, lat);   // 创建点坐标
   // map.centerAndZoom(point,14);                       // 设置缩放度
   // map.addOverlay(point);             // 添加标注
   var lng = $("#mapContainer").attr("gis-lng");
   var lat = $("#mapContainer").attr("gis-lat");
    var map = new BMap.Map("mapContainer", {
        minZoom: 11
    });         // 创建地图实例
    var point = new BMap.Point(lng, lat);    // 创建点坐标
    map.centerAndZoom(point, 18);                   // 设置缩放度
    map.enableScrollWheelZoom();                    //启用滚轮放大缩小
    map.addOverlay(new BMap.Marker(point));

   var taskId =${taskId};

   $.post("/ajax/colligate/fileList",{
       taskId:taskId
   },function (res) {
       if(res.code==0){
            for(var i=0; i<res.data.length;i++){
                var upFileName = res.data[i].filePath;
                var index1=upFileName.lastIndexOf(".");
                var index2=upFileName.length;
                var suffix=upFileName.substring(index1+1,index2);//后缀名
                //通过后缀名 判断文件  如果后缀名是jpg , png ,添加im标签  如果其他的 添加对应的标签
                if(suffix=="png" || suffix=="jpg"){
                    $("#fileList").append('<div><img src="'+ upFileName +'" /></div>');
                }else if(suffix=="gif" || suffix=="mp4"){
                    $("#fileList").append(' <div>\n' +
                        '                            <video width="320" height="240" controls loop>\n' +
                        '                                <source src="'+ upFileName +'" type="video/mp4">\n' +
                        '                            </video>\n' +
                        '                        </div>');

                }else if(suffix=="pdf" || suffix=="doc" || suffix=="docx"){
                    $("#fileList").append('    <div>\n' +
                        '                            <a href="'+ upFileName +'">\n' +
                        '                                <button class="layui-btn  layui-btn-warm">下载上报文档 \n' +
                        '\n' +
                        '                                </button>\n' +
                        '                            </a>\n' +
                        '                        </div>')
                }


            }
       }
   })




</script>
